<template>
  <div class="main-todo">
    <a
      href="#"
      v-if="total + clear"
      class="select-toggle"
      :class="total == 0 ? 'current' : ''"
      @click="selectAll"
    ></a>
    <input
      v-model.trim="content"
      @keyup.enter="handleAdd"
      class="add-todo"
      type="text"
      placeholder="What to do? ↵"
      autofocus
    />
    <!-- <draggable v-model="filterTodos" v-bind="{ animation: 300 }"> -->
    <!-- <transition-group> -->
    <todo-item
      v-for="todo in filterTodos"
      :key="todo.id"
      :todo="todo"
      @toggle="handleToggle"
      @delete="handleDelete"
      @update="handleUpdate"
    ></todo-item>
    <!-- </transition-group> -->
    <!-- </draggable> -->
    <todo-info
      :total="total"
      :clear="clear"
      @toggle="handleState"
      @del-all="handleDelAll"
    ></todo-info>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue"
import { v4 as uuidv4 } from "uuid"
// // import draggable from "vuedraggable"

import TodoInfo from "./coms/TodoInfo.vue"
import TodoItem from "./coms/TodoItem.vue"

let todos = ref([])
let filterTodos = ref([])
let content = ref("")
let toggleData = ref("all")

// getData()
onMounted(() => {
  getData()
  //   console.log(todos)
  //   console.log(filterTodos)
  //   console.log("onMounted...")
})

//定义计算属性
let total = computed(() => {
  return todos.value.filter((item) => item.completed == 0).length
})
let clear = computed(() => {
  return todos.value.filter((item) => item.completed == 1).length
})

//定义方法
//获取
function getData() {
  let jsonTodos = localStorage.getItem("todos")
  if (jsonTodos) {
    todos.value = JSON.parse(jsonTodos)
    // console.log(todos.value)
    handleState(toggleData.value)
  }
}
//添加
function handleAdd() {
  if (content.value == "") {
    alert("请输入待办内容")
    return
  }
  todos.value.push({
    id: uuidv4(),
    content: content.value,
    completed: 0,
  })
  localStorage.setItem("todos", JSON.stringify(todos.value))
  content.value = ""
  getData()
}
//切换按钮状态
function handleToggle(id) {
  const data = todos.value.filter((item) => {
    return item.id == id
  })

  data[0].completed == 0 ? (data[0].completed = 1) : (data[0].completed = 0)

  localStorage.setItem("todos", JSON.stringify(todos.value))
  getData()
}
//删除
function handleDelete(id) {
  todos.value = todos.value.filter((item) => item.id != id)
  localStorage.setItem("todos", JSON.stringify(todos.value))
  getData()
}
//修改
function handleUpdate(id, content) {
  const item = todos.value.find((item) => item.id == id)
  item.content = content
  localStorage.setItem("todos", JSON.stringify(todos.value))
  getData()
}
//过滤
function handleState(s) {
  toggleData.value = s
  switch (toggleData.value) {
    case "all":
      filterTodos.value = todos.value
      break
    case "active":
      filterTodos.value = todos.value.filter((item) => item.completed == 0)
      break
    case "completed":
      filterTodos.value = todos.value.filter((item) => item.completed == 1)
      break
    default:
      filterTodos.value = todos.value
      break
  }
}
//全选/全不选
function selectAll() {
  if (total.value != 0) {
    todos.value.forEach((item, index) => {
      if (item.completed == 0) {
        item.completed = 1
      }
    })
    localStorage.setItem("todos", JSON.stringify(todos.value))
    getData()
  } else if (total.value == 0) {
    todos.value.forEach((item, index) => {
      item.completed = 0
    })
    localStorage.setItem("todos", JSON.stringify(todos.value))
    getData()
  }
}
//批量删除
function handleDelAll() {
  todos.value = todos.value.filter((item) => item.completed != 1)
  localStorage.setItem("todos", JSON.stringify(todos.value))
  getData()
}
</script>

<style lang="stylus">
@import '../../assets/styles/mixins.styl'

.main-todo
  position: relative
  width 800px
  margin: 0 auto
  background-color: rgba(255,255,255,0.5)
  border-radius: 5px
  box-shadow: 5px 5px 5px #666
  .select-toggle
    position: absolute
    display: inline-block
    width: 30px
    height: 30px
    left: 15px
    top: 20px
    background-image: url('../../assets/images/some.svg')
    &.current
      background-image: url('../../assets/images/all.svg')
  .add-todo
    padding: 16px 16px 16px 60px
    width: 100%
    height: 72px
    background-color: rgba(255, 255, 255, 0.3)
    font-size: 24px
    font-family: inherit
    font-weight: 200
    clearDefault()
    border-radius: 5px 5px 0 0
    box-sizing: border-box
    border-bottom: 2px solid #C0C4CC
</style>
